window.onload = function () {

    // 需求1:渲染图书列表
    initArtCateList()
    function initArtCateList() {
        axios({
            url: '/my/article/cates',
            method: 'GET',
        }).then(({ data: res }) => {
            // console.log(res)
            if (res.status !== 0) {
                return layer.msg('获取图书信息失败')
            }
            // 成功之后直接渲染
            let htmlArr = []
            // 遍历返回的数据
            res.data.forEach(element => {
                htmlArr.push(`
            <tr>
                <td>${element.Id}</td>
                <td>${element.name}</td>
                <td>${element.alias}</td>
                <td>
                <button type="button" class="layui-btn layui-btn-xs modifyArticles" data-id ="${element.Id}">编辑</button>
                <button type="button" class="layui-btn layui-btn-danger layui-btn-xs deleteArticles" data-id ="${element.Id}">删除</button>
                </td>
            </tr>
            `)
            })
            //显示在页面中
            document.querySelector('tbody').innerHTML = htmlArr.join('')
        })
    }

    // 需求2:点击添加分类 弹出
    //当你想关闭当前页的某个层时
    let indexadd = ''
    document.querySelector('#addBtn').onclick = function () {
        //弹出层
        indexadd = layer.open({
            type: 1,
            area: ['500px', '300px'],
            shade: [0.8, '#393D49'],//背景遮罩
            title: '添加文章分类',
            content: `
            <form id="addForm" class="layui-form" action="">
            <!-- 分类名称 -->
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <!-- 分类别名 -->
            <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                    <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <!-- 按钮区域 -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button  class="layui-btn okBtn" lay-submit lay-filter="formDemo">确认添加</button>
                    <button  type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
            `
        })
    }

    // //需求3: 右上角 添加文章分类
    // document.querySelector('body').onsubmit = function (e) {
    //     // 阻止默认跳转
    //     e.preventDefault()
    //     // 发生ajax请求
    //     axios({
    //         url: '/my/article/addcates',
    //         method: 'POST',
    //         data: $('#addForm').serialize()
    //     }).then(({ data: res }) => {
    //         //成功回调
    //         // console.log(res)
    //         if (res.status !== 0) {
    //             return layer.msg('新增文章失败')
    //         }

    //         layer.msg('新增文章成功')
    //         // 重新渲染页面
    //         initArtCateList()
    //         // 关闭弹出层
    //         layer.close(indexadd)
    //     });
    // }

    //需求4: 删除文章  (注册委托事件 处理动态新增元素)
    document.querySelector('tbody').onclick = function (e) {
        // 4.1给tbody注册点击事件  判断当前点击的元素是否为 删除按钮
        // 需要先给删除按钮添加个类名  由于是参数指定根据id 删除 还需要给删除按钮添加自定义属性 在渲染的时候获取到id
        if (e.target.classList.contains('deleteArticles')) {
            // console.log(e.target) 
            // 获取到自定义属性的id
            // 根据ID删除  
            let id = e.target.getAttribute('data-id')
            // console.log(id);
            //弹窗询问
            layer.confirm('你是否要删除吗？', function (index) {
                // do something
                // 点击确定，这个函数触发了
                // 发送ajax请求进行删除操作
                axios({
                    url: `/my/article/deletecate/${id}`,
                    method: 'get',
                }).then(({ data: res }) => {
                    //成功回调
                    // console.log(res)
                    if (res.status !== 0) {
                        return layer.msg('删除文章分类失败!')
                    }
                    // 删除成功
                    layer.msg('删除文章分类成功!')
                    //重新渲染图书列表
                    initArtCateList()
                });
                //关闭弹窗
                layer.close(index);
            })

        }
    }

    // 需求5: 编辑文章 再次注册委托事件  处理修改文章弹出的form表单内容   
    // 前面是给tbody注册了委托事件  以及给body注册了onsubmit事件 所以这里给body委托注册点击事件

    let indexedit = ''
    document.querySelector('body').onclick = function (e) {
        e.preventDefault()

        // 5.1判断当前点击的是否为编辑按钮
        //  需要在渲染的时候先给编辑按钮添加个类名  由于是根据参数指定根据id 编辑 还需要给编辑按钮添加自定义属性 在渲染的时候获取到id
        if (e.target.classList.contains('modifyArticles')) {
            // 1. 获取到自定义属性的id
            let id = e.target.getAttribute('data-id')
            // 2. 如果点击的是编辑的按钮  //弹出 form表单
            indexedit = layer.open({
                type: 1,
                area: ['500px', '300px'],
                shade: [0.8, '#393D49'],//背景遮罩
                title: '修改文章分类',
                content: `
            <form id="edit-form" class="layui-form" lay-filter="formText">
            <!-- 修改分类名称 -->
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入要修改的分类名称" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <!-- 修改分类别名 -->
            <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                    <input type="text" name="alias" required lay-verify="required" placeholder="请输入要修改的分类别名" autocomplete="off"
                        class="layui-input">
                </div>
            </div>
            <!-- 按钮区域 -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button  class="layui-btn confirm" lay-submit lay-filter="formDemo" data-id = ${id} > 确认修改</button >
                </div >
            </div >
        </form >
                `
            })

            //发送ajax请求   为弹出层的表单赋值
            axios({
                url: '/my/article/cates/' + id,
                method: 'get',
            }).then(({ data: res }) => {
                //成功回调
                layui.form.val('formText', res.data)
            });
        }

        // 5.2 先找到修改按钮弹出的动态新增的form表单元素给确认修改按钮新增confirm类名
        // 判断当前点击的内容是否是 (确认修改)的按钮
        if (e.target.classList.contains('confirm')) {
            // 1. 因为id只能通过在点击编辑按钮时获取   在获取之后给确认修改 添加自定义属性

            // 2. 获取到自定义属性的id
            let id = e.target.getAttribute('data-id')
            // console.log(id);
            // console.log($('#edit-form [name="name"]').val(),);
            // console.log($('#edit-form [name="alias"]').val());
            // console.log(`Id=${id}&${$('#edit-form').serialize()}`);
            //弹窗询问
            layer.confirm('你确认要修改吗？', function (index) {
                // 3.发送ajax请求
                axios({
                    url: '/my/article/updatecate',
                    method: 'POST',
                    data: `Id=${id}&${$('#edit-form').serialize()}` //大事件的data数据是拼接的形式 a=1&b=2
                }).then(({ data: res }) => {
                    // console.log(res);
                    if (res.status !== 0) {
                        //失败 弹出失败信息
                        return layer.msg(res.message)
                    }
                    //成功 弹出成功信息
                    layer.msg(res.message)
                    // 重新渲染页面
                    initArtCateList()
                });

                //关闭弹窗
                layer.close(index);
                //关闭弹出层
                layer.close(indexedit)
            })
        }

        // 5.3 如果当前点击的是 添加分类里的确认按钮
        if (e.target.classList.contains('okBtn')) {
            // 发送ajax请求
            axios({
                url: '/my/article/addcates',
                method: 'POST',
                data: $('#addForm').serialize()
            }).then(({ data: res }) => {
                //成功回调
                // console.log(res)
                if (res.status !== 0) {
                    return layer.msg('新增文章失败')
                }
                layer.msg('新增文章成功')
                // 重新渲染页面
                initArtCateList()
                // 关闭弹出层
                layer.close(indexadd)
            })
        }

    }




}